<html><head><title>Panel.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Panel.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.Panel
 * @extends Ext.Container
 * Panel is a container that has specific functionality and structural components that make it the perfect building
 * block <b>for</b> application-oriented user interfaces. The Panel contains bottom and top toolbars, along <b>with</b> separate
 * header, footer and body sections.  It also provides built-<b>in</b> expandable and collapsible behavior, along <b>with</b> a
 * variety of prebuilt tool buttons that can be wired up to provide other customized behavior.  Panels can be easily
 * dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.
 * @constructor
 * @param {Object} config The config object
 */</i>
Ext.Panel = Ext.extend(Ext.Container, {
    <i>/**
     * The Panel's header {@link Ext.Element Element}. Read-only.
     * &lt;p&gt;This Element is used to house the {@link #title} and {@link #tools}&lt;/p&gt;
     * @type Ext.Element
     * @property header
     */</i>
<i>// holder</i>
<i>/***
     * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content.
     * The content may be specified <b>in</b> the {@link #html} config, or it may be loaded using the
     * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only.
     * &lt;p&gt;If <b>this</b> is used to load visible HTML elements <b>in</b> either way, then
     * the Panel may not be used as a Layout <b>for</b> hosting nested Panels.&lt;/p&gt;
     * &lt;p&gt;If <b>this</b> Panel is intended to be used as the host of a Layout (See {@link #layout}
     * then the body Element must not be loaded or changed - it is under the control
     * of the Panel's Layout.
     * @type Ext.Element
     * @property body
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object} bodyCfg
     * &lt;p&gt;A {@link Ext.DomHelper DomHelper} configuration object specifying the element structure
     * of <b>this</b> Panel's {@link #body} Element.&lt;/p&gt;
     * &lt;p&gt;This may be used to force the body Element to use a different form of markup than
     * is created automatically. An example of <b>this</b> might be to create a child Panel containing
     * custom content, such as a header, or forcing centering of all Panel
     * content by having the body be a &amp;lt;center&amp;gt; element:&lt;/p&gt;&lt;code&gt;&lt;pre&gt;
<b>new</b> Ext.Panel({
    title: <em>'New Message'</em>,
    collapsible: true,
    renderTo: Ext.getBody(),
    width: 400,
    bodyCfg: {
        tag: <em>'center'</em>,
        cls: <em>'x-panel-body'</em>
    },
    items: [{
        border: false,
        header: false,
        bodyCfg: {tag: <em>'h2'</em>, html: <em>'Message'</em>}
    }, {
        xtype: <em>'textarea'</em>,
        style: {
            width: <em>'95%'</em>,
            marginBottom: <em>'10px'</em>
        }
    },
        <b>new</b> Ext.Button({
            text: <em>'Send'</em>,
            minWidth: <em>'100'</em>,
            style: {
                marginBottom: <em>'10px'</em>
            }
        })
    ]
});&lt;/pre&gt;&lt;/code&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object} headerCfg
     * &lt;p&gt;A {@link Ext.DomHelper DomHelper} configuration object specifying the element structure
     * of <b>this</b> Panel's {@link #header} Element.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object} footerCfg
     * &lt;p&gt;A {@link Ext.DomHelper DomHelper} configuration object specifying the element structure
     * of <b>this</b> Panel's {@link #footer} Element.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * The Panel's footer {@link Ext.Element Element}. Read-only.
     * &lt;p&gt;This Element is used to house the Panel's {@link #buttons}.&lt;/p&gt;
     * @type Ext.Element
     * @property footer
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Mixed} applyTo
     * The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present <b>in</b>
     * the document that specifies some panel-specific structural markup.  When applyTo is used, constituent parts of
     * the panel can be specified by CSS class name within the main element, and the panel will automatically create those
     * components from that markup. Any required components not specified <b>in</b> the markup will be autogenerated <b>if</b> necessary.
     * The following class names are supported (baseCls will be replaced by {@link #baseCls}):
     * &lt;ul&gt;&lt;li&gt;baseCls + <em>'-header'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-header-text'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-bwrap'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-tbar'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-body'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-bbar'</em>&lt;/li&gt;
     * &lt;li&gt;baseCls + <em>'-footer'</em>&lt;/li&gt;&lt;/ul&gt;
     * Using <b>this</b> config, a call to render() is not required.  If applyTo is specified, any value passed <b>for</b>
     * {@link #renderTo} will be ignored and the target element<em>'s parent node will automatically be used as the panel'</em>s container.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object/Array} tbar
     * &lt;p&gt;The top toolbar of the panel. This can be either an {@link Ext.Toolbar} object or an array of
     * buttons/button configs to be added to the toolbar.  Note that <b>this</b> is not available as a property after render.
     * To access the top toolbar after render, use {@link #getTopToolbar}.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Although a Toolbar may contain Field components, these will &lt;b&gt;not&lt;b&gt; be updated by a load
     * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container-&gt;Component hierarchy, and
     * so are not scanned to collect form items. Hoverver, the values &lt;b&gt;will&lt;/b&gt; be submitted because form
     * submission parameters are collected from the DOM tree.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object/Array} bbar
     * &lt;p&gt;The bottom toolbar of the panel. This can be either an {@link Ext.Toolbar} object or an array of
     * buttons/button configs to be added to the toolbar.  Note that <b>this</b> is not available as a property after render.
     * To access the bottom toolbar after render, use {@link #getBottomToolbar}.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; Although a Toolbar may contain Field components, these will &lt;b&gt;not&lt;b&gt; be updated by a load
     * of an ancestor FormPanel. A Panel's toolbars are not part of the standard Container-&gt;Component hierarchy, and
     * so are not scanned to collect form items. Hoverver, the values &lt;b&gt;will&lt;/b&gt; be submitted because form
     * submission parameters are collected from the DOM tree.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} header
     * True to create the Panel's header element explicitly, false to skip creating it.  By <b>default</b>, when header is not
     * specified, <b>if</b> a {@link #title} is set the header will be created automatically, otherwise it will not.  If
     * a title is set but header is explicitly set to false, the header will not be rendered.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} footer
     * True to create the footer element explicitly, false to skip creating it.  By <b>default</b>, when footer is not
     * specified, <b>if</b> one or more buttons have been added to the panel the footer will be created automatically,
     * otherwise it will not.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {String} title
     * The title text to display <b>in</b> the panel header (defaults to <em>''</em>).  When a title is specified the header
     * element will automatically be created and displayed unless {@link #header} is explicitly set to false.  If
     * you don't want to specify a title at config time, but you may want one later, you must either specify a
     * non-empty title (a blank space <em>' '</em> will <b>do</b>) or header:true so that the container element will get created.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Array} buttons
     * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of <b>this</b> panel.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object/String/Function} autoLoad
     * A valid url spec according to the Updater {@link Ext.Updater#update} method.
     * If autoLoad is not null, the panel will attempt to load its contents
     * immediately upon render.&lt;p&gt;
     * The URL will become the <b>default</b> URL <b>for</b> this panel's {@link #body} element,
     * so it may be {@link Ext.Element#refresh refresh}ed at any time.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} frame
     * True to render the panel <b>with</b> custom rounded borders, false to render <b>with</b> plain 1px square borders (defaults to false).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} border
     * True to display the borders of the panel's body element, false to hide them (defaults to true).  By <b>default</b>,
     * the border is a 2px wide inset border, but <b>this</b> can be further altered by setting {@link #bodyBorder} to false.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} bodyBorder
     * True to display an interior border on the body element of the panel, false to hide it (defaults to true).
     * This only applies when {@link #border} == true.  If border == true and bodyBorder == false, the border will display
     * as a 1px wide inset border, giving the entire body element an inset appearance.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {String/Object/Function} bodyStyle
     * Custom CSS styles to be applied to the body element <b>in</b> the format expected by {@link Ext.Element#applyStyles}
     * (defaults to null).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {String} iconCls
     * A CSS class that will provide a background image to be used as the header icon (defaults to <em>''</em>).  An example
     * custom icon class would be something like: .my-icon { background: url(../images/my-icon.gif) 0 6px no-repeat !important;}
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} collapsible
     * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into
     * the header tool button area, false to keep the panel statically sized <b>with</b> no button (defaults to false).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Array} tools
     * An array of tool button configs to be added to the header tool area. When rendered, each tool is
     * stored as an {@link Ext.Element Element} referenced by a public property called &lt;tt&gt;&lt;b&gt;&lt;/b&gt;tools.&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/tt&gt;
     * &lt;p&gt;Each tool config may contain the following properties:
     * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;id&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The type
     * of tool to create. By <b>default</b>, <b>this</b> assigns a CSS class of the form &lt;tt&gt;x-tool-&lt;i&gt;&amp;lt;tool-type&amp;gt;&lt;/i&gt;&lt;/tt&gt; to the
     * resulting tool Element. Ext provides CSS rules, and an icon sprite containing images <b>for</b> the tool types listed below.
     * The developer may implement custom tools by supplying alternate CSS rules and background images:&lt;ul&gt;
     * &lt;li&gt;&lt;tt&gt;toggle&lt;/tt&gt; (Created by <b>default</b> when {@link #collapsible} is &lt;tt&gt;true&lt;/tt&gt;)&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;close&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;minimize&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;maximize&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;restore&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;gear&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;pin&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;unpin&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;right&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;left&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;up&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;down&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;refresh&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;minus&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;plus&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;help&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;search&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;save&lt;/tt&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;tt&gt;print&lt;/tt&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;handler&lt;/b&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;&lt;b&gt;Required.&lt;/b&gt; The <b>function</b> to
     * call when clicked. Arguments passed are:&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;event&lt;/b&gt; : Ext.EventObject&lt;div class=&quot;sub-desc&quot;&gt;The click event.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;toolEl&lt;/b&gt; : Ext.Element&lt;div class=&quot;sub-desc&quot;&gt;The tool Element.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;Panel&lt;/b&gt; : Ext.Panel&lt;div class=&quot;sub-desc&quot;&gt;The host Panel&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;scope&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The scope <b>in</b> which to call the handler.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;qtip&lt;/b&gt; : String/Object&lt;div class=&quot;sub-desc&quot;&gt;A tip string, or
     * a config argument to {@link Ext.QuickTip#register}&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;hidden&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to initially render hidden.&lt;/div&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;on&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;A listener config object specifiying
     * event listeners <b>in</b> the format of an argument to {@link #addListener}&lt;/div&gt;&lt;/li&gt;
     * &lt;/ul&gt;&lt;/div&gt;
     * Example usage:
     * &lt;pre&gt;&lt;code&gt;
tools:[{
    id:<em>'refresh'</em>,
    qtip: <em>'Refresh form Data'</em>,
    <i>// hidden:true,</i>
    handler: <b>function</b>(event, toolEl, panel){
        <i>// refresh logic</i>
    }
}]
&lt;/code&gt;&lt;/pre&gt;
     * Note that apart from the toggle tool which is provided when a panel is
     * collapsible, these tools only provide the visual button. Any required
     * functionality must be provided by adding handlers that implement the
     * necessary behavior.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Ext.Template/Ext.XTemplate} toolTemplate
     * @type {Ext.Template/Ext.XTemplate}
     * &lt;p&gt;A Template used to create tools <b>in</b> the {@link #header} Element. Defaults to:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
<b>new</b> Ext.Template(<em>'&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;'</em>)&lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;This may may be overridden to provide a custom DOM structure <b>for</b> tools based upon a more
     * complex XTemplate. The template's data is a single tool configuration object (Not the entire Array)
     * as specified <b>in</b> {@link #tools} Example:&lt;/p&gt;&lt;pre&gt;&lt;code&gt;
<b>var</b> win = <b>new</b> Ext.Window({
    tools: [{
        id: <em>'download'</em>,
        href: <em>'/MyPdfDoc.pdf'</em>
    }],
    toolTemplate: <b>new</b> Ext.XTemplate(
        <em>'&amp;lt;tpl <b>if</b>=&quot;id==\'</em>download\<em>'&quot;&gt;'</em>,
            <em>'&amp;lt;a class=&quot;x-tool x-tool-pdf&quot; href=&quot;{href}&quot;&gt;&amp;lt;/a&gt;'</em>,
        <em>'&amp;lt;/tpl&gt;'</em>,
        <em>'&amp;lt;tpl <b>if</b>=&quot;id!=\'</em>download\<em>'&quot;&gt;'</em>,
            <em>'&amp;lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;amp;#160;&amp;lt;/div&gt;'</em>,
        <em>'&amp;lt;/tpl&gt;'</em>
    ),
    width:500,
    height:300,
    closeAction:<em>'hide'</em>
});&lt;/code&gt;&lt;/pre&gt;
     * &lt;p&gt;Note that the CSS class &quot;x-tool-pdf&quot; should have an associated style rule which provides an appropriate background image.&lt;/p&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} hideCollapseTool
     * True to hide the expand/collapse toggle button when {@link #collapsible} = true, false to display it (defaults to false).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} titleCollapse
     * True to allow expanding and collapsing the panel (when {@link #collapsible} = true) by clicking anywhere <b>in</b> the
     * header bar, false to allow it only by clicking to tool button (defaults to false).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} autoScroll
     * True to use overflow:<em>'auto'</em> on the panel's body element and show scroll bars automatically when necessary,
     * false to clip any overflowing content (defaults to false).
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} floating
     * &lt;p&gt;True to float <b>this</b> Panel (absolute position it <b>with</b> automatic shimming and shadow), false to display it inline
     * where it is rendered (defaults to false).&lt;/p&gt;
     * &lt;p&gt;Setting floating to true will create an {@link Ext.Layer} encapsulating <b>this</b> Panel's Element and
     * display the Panel at negative offsets so that it is hidden. The position must be set explicitly after render
     * (e.g., myPanel.setPosition(100,100);).&lt;/p&gt;
     * &lt;p&gt;When floating a panel you should always assign a fixed width, otherwise it will be auto width and will expand
     * to fill to the right edge of the viewport.&lt;/p&gt;
     * &lt;p&gt;This property may also be specified as an object to be used as the configuration object <b>for</b>
     * the {@link Ext.Layer} that will be created.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean/String} shadow
     * True (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the panel, false to
     * display no shadow (defaults to <em>'sides'</em>).  Note that <b>this</b> option only applies when floating = true.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Number} shadowOffset
     * The number of pixels to offset the shadow <b>if</b> displayed (defaults to 4). Note that <b>this</b> option only applies
     * when floating = true.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} shim
     * False to disable the iframe shim <b>in</b> browsers which need one (defaults to true).  Note that <b>this</b> option
     * only applies when floating = true.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {String/Object} html
     * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use
     * as the panel<em>'s body content (defaults to '</em><em>'). The HTML content is added by the Panel'</em>s
     * afterRender method, and so the document will not contain <b>this</b> HTML at the time the render
     * event is fired. This content is inserted into the body &lt;i&gt;before&lt;/i&gt; any configured
     * {@link #contentEl} is appended.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {String} contentEl
     * The id of an existing HTML node to use as the panel<em>'s body content (defaults to '</em>'). The
     * specified Element is appended to the Panel<em>'s body Element by the Panel'</em>s afterRender method
     * &lt;i&gt;after any configured {@link #html HTML} has been inserted&lt;/i&gt;, and so the document will
     * not contain <b>this</b> HTML at the time the render event is fired.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Object/Array} keys
     * A KeyMap config object (<b>in</b> the format expected by {@link Ext.KeyMap#addBinding} used to assign custom key
     * handling to <b>this</b> panel (defaults to null).
     */</i>
<i>// holder</i>
<i>/***
       * @cfg {Boolean} draggable
       * &lt;p&gt;True to enable dragging of <b>this</b> Panel (defaults to false).&lt;/p&gt;
       * &lt;p&gt;For custom drag/drop implementations, an Ext.Panel.DD
       * config could also be passed <b>in</b> this config instead of true. Ext.Panel.DD is an internal,
       * undocumented class which moves a proxy Element around <b>in</b> place of the Panel's element, but
       * provides no other behaviour during dragging or on drop. It is a subclass of
       * {@link Ext.dd.DragSource}, so behaviour may be added by implementing the interface methods
       * of {@link Ext.dd.DragDrop} eg:
       * &lt;pre&gt;&lt;code&gt;
<b>new</b> Ext.Panel({
    title: <em>'Drag me'</em>,
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
<i>//      Config option of Ext.Panel.DD class.</i>
<i>//      It's a floating Panel, so <b>do</b> not show a placeholder proxy <b>in</b> the original position.</i>
        insertProxy: false,

<i>//      Called <b>for</b> each mousemove event <b>while</b> dragging the DD object.</i>
        onDrag : <b>function</b>(e){
<i>//          Record the x,y position of the drag proxy so that we can</i>
<i>//          position the Panel at end of drag.</i>
            <b>var</b> pel = <b>this</b>.proxy.getEl();
            <b>this</b>.x = pel.getLeft(true);
            <b>this</b>.y = pel.getTop(true);

<i>//          Keep the Shadow aligned <b>if</b> there is one.</i>
            <b>var</b> s = <b>this</b>.panel.getEl().shadow;
            <b>if</b> (s) {
                s.realign(<b>this</b>.x, <b>this</b>.y, pel.getWidth(), pel.getHeight());
            }
        },

<i>//      Called on the mouseup event.</i>
        endDrag : <b>function</b>(e){
            <b>this</b>.panel.setPosition(<b>this</b>.x, <b>this</b>.y);
        }
    }
}).show();
&lt;/code&gt;&lt;/pre&gt;
     */</i>
<i>// holder</i>
<i>/***
       * @cfg {String} tabTip
       * Adds a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init()
       * must be called <b>in</b> order <b>for</b> the tips to render.
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} disabled
     * Render <b>this</b> panel disabled (<b>default</b> is false). An important note when using the disabled config on panels is
     * that IE will often fail to initialize the disabled mask element correectly <b>if</b> the panel's layout has not yet 
     * completed by the time the Panel is disabled during the render process. If you experience <b>this</b> issue, you may 
     * need to instead use the {@link afterlayout} event to initialize the disabled state:
     * &lt;pre&gt;&lt;code&gt;
<b>new</b> Ext.Panel({
    ...
    listeners: {
        <em>'afterlayout'</em>: {
            fn: <b>function</b>(p){
                p.disable();
            },
            single: true <i>// important, as many layouts can occur</i>
        }
    }
});
&lt;/code&gt;&lt;/pre&gt;
     */</i>
<i>// holder</i>
<i>/***
     * @cfg {Boolean} autoHeight
     * True to use height:<em>'auto'</em>, false to use fixed height (defaults to false). &lt;b&gt;Note&lt;/b&gt;: Setting autoHeight:true 
     * means that the browser will manage the panel's height based on its contents, and that Ext will not manage it at 
     * all. If the panel is within a layout that manages dimensions (fit, border, etc.) then setting autoHeight:true
     * can cause issues <b>with</b> scrolling and will not generally work as expected since the panel will take on the height
     * of its contents rather than the height required by the Ext layout.
     */</i>
<i>// holder</i>
<i>/***
    * @cfg {String} baseCls
    * The base CSS class to apply to <b>this</b> panel<em>'s element (defaults to '</em>x-panel').
    */</i>
    baseCls : <em>'x-panel'</em>,
    <i>/**
    * @cfg {String} collapsedCls
    * A CSS class to add to the panel<em>'s element after it has been collapsed (defaults to '</em>x-panel-collapsed').
    */</i>
    collapsedCls : <em>'x-panel-collapsed'</em>,
    <i>/**
    * @cfg {Boolean} maskDisabled
    * True to mask the panel when it is disabled, false to not mask it (defaults to true).  Either way, the panel
    * will always tell its contained elements to disable themselves when it is disabled, but masking the panel
    * can provide an additional visual cue that the panel is disabled.
    */</i>
    maskDisabled: true,
    <i>/**
    * @cfg {Boolean} animCollapse
    * True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true
    * <b>if</b> the {@link Ext.Fx} class is available, otherwise false).
    */</i>
    animCollapse: Ext.enableFx,
    <i>/**
    * @cfg {Boolean} headerAsText
    * True to display the panel title <b>in</b> the header, false to hide it (defaults to true).
    */</i>
    headerAsText: true,
    <i>/**
    * @cfg {String} buttonAlign
    * The alignment of any buttons added to <b>this</b> panel.  Valid values are <em>'right,'</em> <em>'left'</em> and <em>'center'</em> (defaults to <em>'right'</em>).
    */</i>
    buttonAlign: <em>'right'</em>,
    <i>/**
     * @cfg {Boolean} collapsed
     * True to render the panel collapsed, false to render it expanded (defaults to false).
     */</i>
    collapsed : false,
    <i>/**
    * @cfg {Boolean} collapseFirst
    * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools
    * <b>in</b> the panel's title bar, false to render it last (defaults to true).
    */</i>
    collapseFirst: true,
    <i>/**
     * @cfg {Number} minButtonWidth
     * Minimum width <b>in</b> pixels of all buttons <b>in</b> this panel (defaults to 75)
     */</i>
    minButtonWidth:75,
    <i>/**
     * @cfg {String} elements
     * A comma-delimited list of panel elements to initialize when the panel is rendered.  Normally, <b>this</b> list will be
     * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to
     * make sure a structural element is rendered even <b>if</b> not specified at config time (<b>for</b> example, you may want
     * to add a button or toolbar dynamically after the panel has been rendered).  Adding those elements to <b>this</b>
     * list will allocate the required placeholders <b>in</b> the panel when it is rendered.  Valid values are&lt;ul&gt;
     * &lt;li&gt;&lt;b&gt;header&lt;/b&gt;&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;tbar&lt;/b&gt; (top bar)&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;body&lt;/b&gt; (required)&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;bbar&lt;/b&gt; (bottom bar)&lt;/li&gt;
     * &lt;li&gt;&lt;b&gt;footer&lt;/b&gt;&lt;li&gt;
     * &lt;/ul&gt;
     * Defaults to <em>'body'</em>.
     */</i>
    elements : <em>'body'</em>,

    <i>// protected - these could be used to customize the behavior of the window,</i>
    <i>// but changing them would not be useful without further mofifications and</i>
    <i>// could lead to unexpected or undesirable results.</i>
    toolTarget : <em>'header'</em>,
    collapseEl : <em>'bwrap'</em>,
    slideAnchor : <em>'t'</em>,
    disabledClass: <em>''</em>,

    <i>// private, notify box <b>this</b> class will handle heights</i>
    deferHeight: true,
    <i>// private</i>
    expandDefaults: {
        duration:.25
    },
    <i>// private</i>
    collapseDefaults: {
        duration:.25
    },

    <i>// private</i>
    initComponent : <b>function</b>(){
        Ext.Panel.superclass.initComponent.call(<b>this</b>);

        <b>this</b>.addEvents(
            <i>/**
             * @event bodyresize
             * Fires after the Panel has been resized.
             * @param {Ext.Panel} p the Panel which has been resized.
             * @param {Number} width The Panel's <b>new</b> width.
             * @param {Number} height The Panel's <b>new</b> height.
             */</i>
            <em>'bodyresize'</em>,
            <i>/**
             * @event titlechange
             * Fires after the Panel title has been set or changed.
             * @param {Ext.Panel} p the Panel which has had its title changed.
             * @param {String} The <b>new</b> title.
             */</i>
            <em>'titlechange'</em>,
            <i>/**
             * @event iconchange
             * Fires after the Panel icon class has been set or changed.
             * @param {Ext.Panel} p the Panel which has had its icon class changed.
             * @param {String} The <b>new</b> icon class.
             * @param {String} The old icon class.
             */</i>
            <em>'iconchange'</em>,
            <i>/**
             * @event collapse
             * Fires after the Panel has been collapsed.
             * @param {Ext.Panel} p the Panel that has been collapsed.
             */</i>
            <em>'collapse'</em>,
            <i>/**
             * @event expand
             * Fires after the Panel has been expanded.
             * @param {Ext.Panel} p The Panel that has been expanded.
             */</i>
            <em>'expand'</em>,
            <i>/**
             * @event beforecollapse
             * Fires before the Panel is collapsed.  A handler can <b>return</b> false to cancel the collapse.
             * @param {Ext.Panel} p the Panel being collapsed.
             * @param {Boolean} animate True <b>if</b> the collapse is animated, <b>else</b> false.
             */</i>
            <em>'beforecollapse'</em>,
            <i>/**
             * @event beforeexpand
             * Fires before the Panel is expanded.  A handler can <b>return</b> false to cancel the expand.
             * @param {Ext.Panel} p The Panel being expanded.
             * @param {Boolean} animate True <b>if</b> the expand is animated, <b>else</b> false.
             */</i>
            <em>'beforeexpand'</em>,
            <i>/**
             * @event beforeclose
             * Fires before the Panel is closed.  Note that Panels <b>do</b> not directly support being closed, but some
             * Panel subclasses <b>do</b> (like {@link Ext.Window}).  This event only applies to such subclasses.
             * A handler can <b>return</b> false to cancel the close.
             * @param {Ext.Panel} p The Panel being closed.
             */</i>
            <em>'beforeclose'</em>,
            <i>/**
             * @event close
             * Fires after the Panel is closed.  Note that Panels <b>do</b> not directly support being closed, but some
             * Panel subclasses <b>do</b> (like {@link Ext.Window}).
             * @param {Ext.Panel} p The Panel that has been closed.
             */</i>
            <em>'close'</em>,
            <i>/**
             * @event activate
             * Fires after the Panel has been visually activated.
             * Note that Panels <b>do</b> not directly support being activated, but some Panel subclasses
             * <b>do</b> (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
             * activate and deactivate events under the control of the TabPanel.
             * @param {Ext.Panel} p The Panel that has been activated.
             */</i>
            <em>'activate'</em>,
            <i>/**
             * @event deactivate
             * Fires after the Panel has been visually deactivated.
             * Note that Panels <b>do</b> not directly support being deactivated, but some Panel subclasses
             * <b>do</b> (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the
             * activate and deactivate events under the control of the TabPanel.
             * @param {Ext.Panel} p The Panel that has been deactivated.
             */</i>
            <em>'deactivate'</em>
        );

        <i>// shortcuts</i>
        <b>if</b>(this.tbar){
            <b>this</b>.elements += <em>',tbar'</em>;
            <b>if</b>(typeof <b>this</b>.tbar == <em>'object'</em>){
                <b>this</b>.topToolbar = <b>this</b>.tbar;
            }
            <b>delete</b> this.tbar;
        }
        <b>if</b>(this.bbar){
            <b>this</b>.elements += <em>',bbar'</em>;
            <b>if</b>(typeof <b>this</b>.bbar == <em>'object'</em>){
                <b>this</b>.bottomToolbar = <b>this</b>.bbar;
            }
            <b>delete</b> this.bbar;
        }

        <b>if</b>(this.header === true){
            <b>this</b>.elements += <em>',header'</em>;
            <b>delete</b> this.header;
        }<b>else</b> if(<b>this</b>.headerCfg || (<b>this</b>.title &amp;&amp; <b>this</b>.header !== false)){
            <b>this</b>.elements += <em>',header'</em>;
        }

        <b>if</b>(this.footerCfg || <b>this</b>.footer === true){
            <b>this</b>.elements += <em>',footer'</em>;
            <b>delete</b> this.footer;
        }

        <b>if</b>(this.buttons){
            <b>var</b> btns = <b>this</b>.buttons;
            <i>/**
             * This Panel's Array of buttons as created from the &lt;tt&gt;buttons&lt;/tt&gt;
             * config property. Read only.
             * @type Array
             * @property buttons
             */</i>
            <b>this</b>.buttons = [];
            <b>for</b>(var i = 0, len = btns.length; i &lt; len; i++) {
                <b>if</b>(btns[i].render){ <i>// button instance</i>
                    btns[i].ownerCt = <b>this</b>;
                    <b>this</b>.buttons.push(btns[i]);
                }<b>else</b>{
                    <b>this</b>.addButton(btns[i]);
                }
            }
        }
        <b>if</b>(this.autoLoad){
            <b>this</b>.on(<em>'render'</em>, <b>this</b>.doAutoLoad, <b>this</b>, {delay:10});
        }
    },

    <i>// private</i>
    createElement : <b>function</b>(name, pnode){
        <b>if</b>(this[name]){
            pnode.appendChild(<b>this</b>[name].dom);
            <b>return</b>;
        }

        <b>if</b>(name === <em>'bwrap'</em> || <b>this</b>.elements.indexOf(name) != -1){
            <b>if</b>(this[name+<em>'Cfg'</em>]){
                <b>this</b>[name] = Ext.fly(pnode).createChild(<b>this</b>[name+<em>'Cfg'</em>]);
            }<b>else</b>{
                <b>var</b> el = document.createElement(<em>'div'</em>);
                el.className = <b>this</b>[name+<em>'Cls'</em>];
                <b>this</b>[name] = Ext.get(pnode.appendChild(el));
            }
            <b>if</b>(this[name+<em>'CssClass'</em>]){
                <b>this</b>[name].addClass(<b>this</b>[name+<em>'CssClass'</em>]);
            }
            <b>if</b>(this[name+<em>'Style'</em>]){
                <b>this</b>[name].applyStyles(<b>this</b>[name+<em>'Style'</em>]);
            }
        }
    },

    <i>// private</i>
    onRender : <b>function</b>(ct, position){
        Ext.Panel.superclass.onRender.call(<b>this</b>, ct, position);

        <b>this</b>.createClasses();

        <b>if</b>(this.el){ <i>// existing markup</i>
            <b>this</b>.el.addClass(<b>this</b>.baseCls);
            <b>this</b>.header = <b>this</b>.el.down(<em>'.'</em>+<b>this</b>.headerCls);
            <b>this</b>.bwrap = <b>this</b>.el.down(<em>'.'</em>+<b>this</b>.bwrapCls);
            <b>var</b> cp = <b>this</b>.bwrap ? <b>this</b>.bwrap : <b>this</b>.el;
            <b>this</b>.tbar = cp.down(<em>'.'</em>+<b>this</b>.tbarCls);
            <b>this</b>.body = cp.down(<em>'.'</em>+<b>this</b>.bodyCls);
            <b>this</b>.bbar = cp.down(<em>'.'</em>+<b>this</b>.bbarCls);
            <b>this</b>.footer = cp.down(<em>'.'</em>+<b>this</b>.footerCls);
            <b>this</b>.fromMarkup = true;
        }<b>else</b>{
            <b>this</b>.el = ct.createChild({
                id: <b>this</b>.id,
                cls: <b>this</b>.baseCls
            }, position);
        }
        <b>var</b> el = <b>this</b>.el, d = el.dom;

        <b>if</b>(this.cls){
            <b>this</b>.el.addClass(<b>this</b>.cls);
        }

        <b>if</b>(this.buttons){
            <b>this</b>.elements += <em>',footer'</em>;
        }

        <i>// This block allows <b>for</b> maximum flexibility and performance when using existing markup</i>

        <i>// framing requires special markup</i>
        <b>if</b>(this.frame){
            el.insertHtml(<em>'afterBegin'</em>, String.format(Ext.Element.boxMarkup, <b>this</b>.baseCls));

            <b>this</b>.createElement(<em>'header'</em>, d.firstChild.firstChild.firstChild);
            <b>this</b>.createElement(<em>'bwrap'</em>, d);

            <i>// append the mid and bottom frame to the bwrap</i>
            <b>var</b> bw = <b>this</b>.bwrap.dom;
            <b>var</b> ml = d.childNodes[1], bl = d.childNodes[2];
            bw.appendChild(ml);
            bw.appendChild(bl);

            <b>var</b> mc = bw.firstChild.firstChild.firstChild;
            <b>this</b>.createElement(<em>'tbar'</em>, mc);
            <b>this</b>.createElement(<em>'body'</em>, mc);
            <b>this</b>.createElement(<em>'bbar'</em>, mc);
            <b>this</b>.createElement(<em>'footer'</em>, bw.lastChild.firstChild.firstChild);

            <b>if</b>(!<b>this</b>.footer){
                <b>this</b>.bwrap.dom.lastChild.className += <em>' x-panel-nofooter'</em>;
            }
        }<b>else</b>{
            <b>this</b>.createElement(<em>'header'</em>, d);
            <b>this</b>.createElement(<em>'bwrap'</em>, d);

            <i>// append the mid and bottom frame to the bwrap</i>
            <b>var</b> bw = <b>this</b>.bwrap.dom;
            <b>this</b>.createElement(<em>'tbar'</em>, bw);
            <b>this</b>.createElement(<em>'body'</em>, bw);
            <b>this</b>.createElement(<em>'bbar'</em>, bw);
            <b>this</b>.createElement(<em>'footer'</em>, bw);

            <b>if</b>(!<b>this</b>.header){
                <b>this</b>.body.addClass(<b>this</b>.bodyCls + <em>'-noheader'</em>);
                <b>if</b>(this.tbar){
                    <b>this</b>.tbar.addClass(<b>this</b>.tbarCls + <em>'-noheader'</em>);
                }
            }
        }

        <b>if</b>(this.border === false){
            <b>this</b>.el.addClass(<b>this</b>.baseCls + <em>'-noborder'</em>);
            <b>this</b>.body.addClass(<b>this</b>.bodyCls + <em>'-noborder'</em>);
            <b>if</b>(this.header){
                <b>this</b>.header.addClass(<b>this</b>.headerCls + <em>'-noborder'</em>);
            }
            <b>if</b>(this.footer){
                <b>this</b>.footer.addClass(<b>this</b>.footerCls + <em>'-noborder'</em>);
            }
            <b>if</b>(this.tbar){
                <b>this</b>.tbar.addClass(<b>this</b>.tbarCls + <em>'-noborder'</em>);
            }
            <b>if</b>(this.bbar){
                <b>this</b>.bbar.addClass(<b>this</b>.bbarCls + <em>'-noborder'</em>);
            }
        }

        <b>if</b>(this.bodyBorder === false){
           <b>this</b>.body.addClass(<b>this</b>.bodyCls + <em>'-noborder'</em>);
        }

        <b>this</b>.bwrap.enableDisplayMode(<em>'block'</em>);

        <b>if</b>(this.header){
            <b>this</b>.header.unselectable();

            <i>// <b>for</b> tools, we need to wrap any existing header markup</i>
            <b>if</b>(this.headerAsText){
                <b>this</b>.header.dom.innerHTML =
                    <em>'&lt;span class=&quot;'</em> + <b>this</b>.headerTextCls + <em>'&quot;&gt;'</em>+<b>this</b>.header.dom.innerHTML+<em>'&lt;/span&gt;'</em>;

                <b>if</b>(this.iconCls){
                    <b>this</b>.setIconClass(<b>this</b>.iconCls);
                }
            }
        }

        <b>if</b>(this.floating){
            <b>this</b>.makeFloating(<b>this</b>.floating);
        }

        <b>if</b>(this.collapsible){
            <b>this</b>.tools = <b>this</b>.tools ? <b>this</b>.tools.slice(0) : [];
            <b>if</b>(!<b>this</b>.hideCollapseTool){
                <b>this</b>.tools[<b>this</b>.collapseFirst?<em>'unshift'</em>:<em>'push'</em>]({
                    id: <em>'toggle'</em>,
                    handler : <b>this</b>.toggleCollapse,
                    scope: <b>this</b>
                });
            }
            <b>if</b>(this.titleCollapse &amp;&amp; <b>this</b>.header){
                <b>this</b>.header.on(<em>'click'</em>, <b>this</b>.toggleCollapse, <b>this</b>);
                <b>this</b>.header.setStyle(<em>'cursor'</em>, <em>'pointer'</em>);
            }
        }
        <b>if</b>(this.tools){
            <b>var</b> ts = <b>this</b>.tools;
            <b>this</b>.tools = {};
            <b>this</b>.addTool.apply(<b>this</b>, ts);
        }<b>else</b>{
            <b>this</b>.tools = {};
        }

        <b>if</b>(this.buttons &amp;&amp; <b>this</b>.buttons.length &gt; 0){
            <i>// tables are required to maintain order and <b>for</b> correct IE layout</i>
            <b>var</b> tb = <b>this</b>.footer.createChild({cls:<em>'x-panel-btns-ct'</em>, cn: {
                cls:&quot;x-panel-btns x-panel-btns-&quot;+<b>this</b>.buttonAlign,
                html:<em>'&lt;table cellspacing=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div class=&quot;x-clear&quot;&gt;&lt;/div&gt;'</em>
            }}, null, true);
            <b>var</b> tr = tb.getElementsByTagName(<em>'tr'</em>)[0];
            <b>for</b>(var i = 0, len = <b>this</b>.buttons.length; i &lt; len; i++) {
                <b>var</b> b = <b>this</b>.buttons[i];
                <b>var</b> td = document.createElement(<em>'td'</em>);
                td.className = <em>'x-panel-btn-td'</em>;
                b.render(tr.appendChild(td));
            }
        }

        <b>if</b>(this.tbar &amp;&amp; <b>this</b>.topToolbar){
            <b>if</b>(Ext.isArray(<b>this</b>.topToolbar)){
                <b>this</b>.topToolbar = <b>new</b> Ext.Toolbar(<b>this</b>.topToolbar);
            }
            <b>this</b>.topToolbar.render(<b>this</b>.tbar);
            <b>this</b>.topToolbar.ownerCt = <b>this</b>;
        }
        <b>if</b>(this.bbar &amp;&amp; <b>this</b>.bottomToolbar){
            <b>if</b>(Ext.isArray(<b>this</b>.bottomToolbar)){
                <b>this</b>.bottomToolbar = <b>new</b> Ext.Toolbar(<b>this</b>.bottomToolbar);
            }
            <b>this</b>.bottomToolbar.render(<b>this</b>.bbar);
            <b>this</b>.bottomToolbar.ownerCt = <b>this</b>;
        }
    },

    <i>/**
     * Sets the CSS class that provides the icon image <b>for</b> this panel.  This method will replace any existing
     * icon class <b>if</b> one has already been set.
     * @param {String} cls The <b>new</b> CSS class name
     */</i>
    setIconClass : <b>function</b>(cls){
        <b>var</b> old = <b>this</b>.iconCls;
        <b>this</b>.iconCls = cls;
        <b>if</b>(this.rendered &amp;&amp; <b>this</b>.header){
            <b>if</b>(this.frame){
                <b>this</b>.header.addClass(<em>'x-panel-icon'</em>);
                <b>this</b>.header.replaceClass(old, <b>this</b>.iconCls);
            }<b>else</b>{
                <b>var</b> hd = <b>this</b>.header,
                    img = hd.child(<em>'img.x-panel-inline-icon'</em>);
                <b>if</b>(img){
                    Ext.fly(img).replaceClass(old, <b>this</b>.iconCls);
                }<b>else</b>{
                    Ext.DomHelper.insertBefore(hd.dom.firstChild, {
                        tag:<em>'img'</em>, src: Ext.BLANK_IMAGE_URL, cls:<em>'x-panel-inline-icon '</em>+<b>this</b>.iconCls
                    });
                 }
            }
        }
        <b>this</b>.fireEvent(<em>'iconchange'</em>, <b>this</b>, cls, old);
    },

    <i>// private</i>
    makeFloating : <b>function</b>(cfg){
        <b>this</b>.floating = true;
        <b>this</b>.el = <b>new</b> Ext.Layer(
            <b>typeof</b> cfg == <em>'object'</em> ? cfg : {
                shadow: <b>this</b>.shadow !== undefined ? <b>this</b>.shadow : <em>'sides'</em>,
                shadowOffset: <b>this</b>.shadowOffset,
                constrain:false,
                shim: <b>this</b>.shim === false ? false : undefined
            }, <b>this</b>.el
        );
    },

    <i>/**
     * Returns the toolbar from the top (tbar) section of the panel.
     * @<b>return</b> {Ext.Toolbar} The toolbar
     */</i>
    getTopToolbar : <b>function</b>(){
        <b>return</b> this.topToolbar;
    },

    <i>/**
     * Returns the toolbar from the bottom (bbar) section of the panel.
     * @<b>return</b> {Ext.Toolbar} The toolbar
     */</i>
    getBottomToolbar : <b>function</b>(){
        <b>return</b> this.bottomToolbar;
    },

    <i>/**
     * Adds a button to <b>this</b> panel.  Note that <b>this</b> method must be called prior to rendering.  The preferred
     * approach is to add buttons via the {@link #buttons} config.
     * @param {String/Object} config A valid {@link Ext.Button} config.  A string will become the text <b>for</b> a <b>default</b>
     * button config, an object will be treated as a button config object.
     * @param {Function} handler The <b>function</b> to be called on button {@link Ext.Button#click}
     * @param {Object} scope The scope to use <b>for</b> the button handler <b>function</b>
     * @<b>return</b> {Ext.Button} The button that was added
     */</i>
    addButton : <b>function</b>(config, handler, scope){
        <b>var</b> bc = {
            handler: handler,
            scope: scope,
            minWidth: <b>this</b>.minButtonWidth,
            hideParent:true
        };
        <b>if</b>(typeof config == &quot;string&quot;){
            bc.text = config;
        }<b>else</b>{
            Ext.apply(bc, config);
        }
        <b>var</b> btn = <b>new</b> Ext.Button(bc);
        btn.ownerCt = <b>this</b>;
        <b>if</b>(!<b>this</b>.buttons){
            <b>this</b>.buttons = [];
        }
        <b>this</b>.buttons.push(btn);
        <b>return</b> btn;
    },

    <i>// private</i>
    addTool : <b>function</b>(){
        <b>if</b>(!<b>this</b>[this.toolTarget]) { <i>// no where to render tools!</i>
            <b>return</b>;
        }
        <b>if</b>(!<b>this</b>.toolTemplate){
            <i>// initialize the global tool template on first use</i>
            <b>var</b> tt = <b>new</b> Ext.Template(
                 <em>'&lt;div class=&quot;x-tool x-tool-{id}&quot;&gt;&amp;#160;&lt;/div&gt;'</em>
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.Panel.prototype.toolTemplate = tt;
        }
        <b>for</b>(var i = 0, a = arguments, len = a.length; i &lt; len; i++) {
            <b>var</b> tc = a[i];
            <b>if</b>(!<b>this</b>.tools[tc.id]){
                <b>var</b> overCls = <em>'x-tool-'</em>+tc.id+<em>'-over'</em>;
                <b>var</b> t = <b>this</b>.toolTemplate.insertFirst((tc.align !== <em>'left'</em>) ? <b>this</b>[this.toolTarget] : <b>this</b>[this.toolTarget].child(<em>'span'</em>), tc, true);
                <b>this</b>.tools[tc.id] = t;
                t.enableDisplayMode(<em>'block'</em>);
                t.on(<em>'click'</em>, <b>this</b>.createToolHandler(t, tc, overCls, <b>this</b>));
                <b>if</b>(tc.on){
                    t.on(tc.on);
                }
                <b>if</b>(tc.hidden){
                    t.hide();
                }
                <b>if</b>(tc.qtip){
                    <b>if</b>(typeof tc.qtip == <em>'object'</em>){
                        Ext.QuickTips.register(Ext.apply({
                              target: t.id
                        }, tc.qtip));
                    } <b>else</b> {
                        t.dom.qtip = tc.qtip;
                    }
                }
                t.addClassOnOver(overCls);
            }
        }
    },

    <i>// private</i>
    onShow : <b>function</b>(){
        <b>if</b>(this.floating){
            <b>return</b> this.el.show();
        }
        Ext.Panel.superclass.onShow.call(<b>this</b>);
    },

    <i>// private</i>
    onHide : <b>function</b>(){
        <b>if</b>(this.floating){
            <b>return</b> this.el.hide();
        }
        Ext.Panel.superclass.onHide.call(<b>this</b>);
    },

    <i>// private</i>
    createToolHandler : <b>function</b>(t, tc, overCls, panel){
        <b>return</b> function(e){
            t.removeClass(overCls);
            e.stopEvent();
            <b>if</b>(tc.handler){
                tc.handler.call(tc.scope || t, e, t, panel);
            }
        };
    },

    <i>// private</i>
    afterRender : <b>function</b>(){
        <b>if</b>(this.fromMarkup &amp;&amp; <b>this</b>.height === undefined &amp;&amp; !<b>this</b>.autoHeight){
            <b>this</b>.height = <b>this</b>.el.getHeight();
        }
        <b>if</b>(this.floating &amp;&amp; !<b>this</b>.hidden &amp;&amp; !<b>this</b>.initHidden){
            <b>this</b>.el.show();
        }
        <b>if</b>(this.title){
            <b>this</b>.setTitle(<b>this</b>.title);
        }
        <b>this</b>.setAutoScroll();
        <b>if</b>(this.html){
            <b>this</b>.body.update(<b>typeof</b> this.html == <em>'object'</em> ?
                             Ext.DomHelper.markup(<b>this</b>.html) :
                             <b>this</b>.html);
            <b>delete</b> this.html;
        }
        <b>if</b>(this.contentEl){
            <b>var</b> ce = Ext.getDom(<b>this</b>.contentEl);
            Ext.fly(ce).removeClass([<em>'x-hidden'</em>, <em>'x-hide-display'</em>]);
            <b>this</b>.body.dom.appendChild(ce);
        }
        <b>if</b>(this.collapsed){
            <b>this</b>.collapsed = false;
            <b>this</b>.collapse(false);
        }
        Ext.Panel.superclass.afterRender.call(<b>this</b>); <i>// <b>do</b> sizing calcs last</i>
        <b>this</b>.initEvents();
    },

    <i>// private</i>
    setAutoScroll : <b>function</b>(){
        <b>if</b>(this.rendered &amp;&amp; <b>this</b>.autoScroll){
            <b>var</b> el = <b>this</b>.body || <b>this</b>.el;
            <b>if</b>(el){
                el.setOverflow(<em>'auto'</em>);
            }
        }
    },

    <i>// private</i>
    getKeyMap : <b>function</b>(){
        <b>if</b>(!<b>this</b>.keyMap){
            <b>this</b>.keyMap = <b>new</b> Ext.KeyMap(<b>this</b>.el, <b>this</b>.keys);
        }
        <b>return</b> this.keyMap;
    },

    <i>// private</i>
    initEvents : <b>function</b>(){
        <b>if</b>(this.keys){
            <b>this</b>.getKeyMap();
        }
        <b>if</b>(this.draggable){
            <b>this</b>.initDraggable();
        }
    },

    <i>// private</i>
    initDraggable : <b>function</b>(){
        <i>/**
         * &lt;p&gt;If <b>this</b> Panel is configured {@link #draggable}, <b>this</b> property will contain
         * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.&lt;/p&gt;
         * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}
         * <b>in</b> order to supply behaviour <b>for</b> each stage of the drag/drop process. See {@link #draggable}.
         * @type Ext.dd.DragSource.
         * @property dd
         */</i>
        <b>this</b>.dd = <b>new</b> Ext.Panel.DD(<b>this</b>, <b>typeof</b> this.draggable == <em>'boolean'</em> ? null : <b>this</b>.draggable);
    },

    <i>// private</i>
    beforeEffect : <b>function</b>(){
        <b>if</b>(this.floating){
            <b>this</b>.el.beforeAction();
        }
        <b>this</b>.el.addClass(<em>'x-panel-animated'</em>);
    },

    <i>// private</i>
    afterEffect : <b>function</b>(){
        <b>this</b>.syncShadow();
        <b>this</b>.el.removeClass(<em>'x-panel-animated'</em>);
    },

    <i>// private - wraps up an animation param <b>with</b> internal callbacks</i>
    createEffect : <b>function</b>(a, cb, scope){
        <b>var</b> o = {
            scope:scope,
            block:true
        };
        <b>if</b>(a === true){
            o.callback = cb;
            <b>return</b> o;
        }<b>else</b> if(!a.callback){
            o.callback = cb;
        }<b>else</b> { <i>// wrap it up</i>
            o.callback = <b>function</b>(){
                cb.call(scope);
                Ext.callback(a.callback, a.scope);
            };
        }
        <b>return</b> Ext.applyIf(o, a);
    },

    <i>/**
     * Collapses the panel body so that it becomes hidden.  Fires the {@link #beforecollapse} event which will
     * cancel the collapse action <b>if</b> it returns false.
     * @param {Boolean} animate True to animate the transition, <b>else</b> false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @<b>return</b> {Ext.Panel} <b>this</b>
     */</i>
    collapse : <b>function</b>(animate){
        <b>if</b>(this.collapsed || <b>this</b>.el.hasFxBlock() || <b>this</b>.fireEvent(<em>'beforecollapse'</em>, <b>this</b>, animate) === false){
            <b>return</b>;
        }
        <b>var</b> doAnim = animate === true || (animate !== false &amp;&amp; <b>this</b>.animCollapse);
        <b>this</b>.beforeEffect();
        <b>this</b>.onCollapse(doAnim, animate);
        <b>return</b> this;
    },

    <i>// private</i>
    onCollapse : <b>function</b>(doAnim, animArg){
        <b>if</b>(doAnim){
            <b>this</b>[this.collapseEl].slideOut(<b>this</b>.slideAnchor,
                    Ext.apply(<b>this</b>.createEffect(animArg||true, <b>this</b>.afterCollapse, <b>this</b>),
                        <b>this</b>.collapseDefaults));
        }<b>else</b>{
            <b>this</b>[this.collapseEl].hide();
            <b>this</b>.afterCollapse();
        }
    },

    <i>// private</i>
    afterCollapse : <b>function</b>(){
        <b>this</b>.collapsed = true;
        <b>this</b>.el.addClass(<b>this</b>.collapsedCls);
        <b>this</b>.afterEffect();
        <b>this</b>.fireEvent(<em>'collapse'</em>, <b>this</b>);
    },

    <i>/**
     * Expands the panel body so that it becomes visible.  Fires the {@link #beforeexpand} event which will
     * cancel the expand action <b>if</b> it returns false.
     * @param {Boolean} animate True to animate the transition, <b>else</b> false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @<b>return</b> {Ext.Panel} <b>this</b>
     */</i>
    expand : <b>function</b>(animate){
        <b>if</b>(!<b>this</b>.collapsed || <b>this</b>.el.hasFxBlock() || <b>this</b>.fireEvent(<em>'beforeexpand'</em>, <b>this</b>, animate) === false){
            <b>return</b>;
        }
        <b>var</b> doAnim = animate === true || (animate !== false &amp;&amp; <b>this</b>.animCollapse);
        <b>this</b>.el.removeClass(<b>this</b>.collapsedCls);
        <b>this</b>.beforeEffect();
        <b>this</b>.onExpand(doAnim, animate);
        <b>return</b> this;
    },

    <i>// private</i>
    onExpand : <b>function</b>(doAnim, animArg){
        <b>if</b>(doAnim){
            <b>this</b>[this.collapseEl].slideIn(<b>this</b>.slideAnchor,
                    Ext.apply(<b>this</b>.createEffect(animArg||true, <b>this</b>.afterExpand, <b>this</b>),
                        <b>this</b>.expandDefaults));
        }<b>else</b>{
            <b>this</b>[this.collapseEl].show();
            <b>this</b>.afterExpand();
        }
    },

    <i>// private</i>
    afterExpand : <b>function</b>(){
        <b>this</b>.collapsed = false;
        <b>this</b>.afterEffect();
        <b>this</b>.fireEvent(<em>'expand'</em>, <b>this</b>);
    },

    <i>/**
     * Shortcut <b>for</b> performing an {@link #expand} or {@link #collapse} based on the current state of the panel.
     * @param {Boolean} animate True to animate the transition, <b>else</b> false (defaults to the value of the
     * {@link #animCollapse} panel config)
     * @<b>return</b> {Ext.Panel} <b>this</b>
     */</i>
    toggleCollapse : <b>function</b>(animate){
        <b>this</b>[this.collapsed ? <em>'expand'</em> : <em>'collapse'</em>](animate);
        <b>return</b> this;
    },

    <i>// private</i>
    onDisable : <b>function</b>(){
        <b>if</b>(this.rendered &amp;&amp; <b>this</b>.maskDisabled){
            <b>this</b>.el.mask();
        }
        Ext.Panel.superclass.onDisable.call(<b>this</b>);
    },

    <i>// private</i>
    onEnable : <b>function</b>(){
        <b>if</b>(this.rendered &amp;&amp; <b>this</b>.maskDisabled){
            <b>this</b>.el.unmask();
        }
        Ext.Panel.superclass.onEnable.call(<b>this</b>);
    },

    <i>// private</i>
    onResize : <b>function</b>(w, h){
        <b>if</b>(w !== undefined || h !== undefined){
            <b>if</b>(!<b>this</b>.collapsed){
                <b>if</b>(typeof w == <em>'number'</em>){
                    <b>this</b>.body.setWidth(
                            <b>this</b>.adjustBodyWidth(w - <b>this</b>.getFrameWidth()));
                }<b>else</b> if(w == <em>'auto'</em>){
                    <b>this</b>.body.setWidth(w);
                }

                <b>if</b>(typeof h == <em>'number'</em>){
                    <b>this</b>.body.setHeight(
                            <b>this</b>.adjustBodyHeight(h - <b>this</b>.getFrameHeight()));
                }<b>else</b> if(h == <em>'auto'</em>){
                    <b>this</b>.body.setHeight(h);
                }
                
                <b>if</b>(this.disabled &amp;&amp; <b>this</b>.el._mask){
                    <b>this</b>.el._mask.setSize(<b>this</b>.el.dom.clientWidth, <b>this</b>.el.getHeight());
                }
            }<b>else</b>{
                <b>this</b>.queuedBodySize = {width: w, height: h};
                <b>if</b>(!<b>this</b>.queuedExpand &amp;&amp; <b>this</b>.allowQueuedExpand !== false){
                    <b>this</b>.queuedExpand = true;
                    <b>this</b>.on(<em>'expand'</em>, <b>function</b>(){
                        <b>delete</b> this.queuedExpand;
                        <b>this</b>.onResize(<b>this</b>.queuedBodySize.width, <b>this</b>.queuedBodySize.height);
                        <b>this</b>.doLayout();
                    }, <b>this</b>, {single:true});
                }
            }
            <b>this</b>.fireEvent(<em>'bodyresize'</em>, <b>this</b>, w, h);
        }
        <b>this</b>.syncShadow();
    },

    <i>// private</i>
    adjustBodyHeight : <b>function</b>(h){
        <b>return</b> h;
    },

    <i>// private</i>
    adjustBodyWidth : <b>function</b>(w){
        <b>return</b> w;
    },

    <i>// private</i>
    onPosition : <b>function</b>(){
        <b>this</b>.syncShadow();
    },

    <i>/**
     * Returns the width <b>in</b> pixels of the framing elements of <b>this</b> panel (not including the body width).  To
     * retrieve the body width see {@link #getInnerWidth}.
     * @<b>return</b> {Number} The frame width
     */</i>
    getFrameWidth : <b>function</b>(){
        <b>var</b> w = <b>this</b>.el.getFrameWidth(<em>'lr'</em>);

        <b>if</b>(this.frame){
            <b>var</b> l = <b>this</b>.bwrap.dom.firstChild;
            w += (Ext.fly(l).getFrameWidth(<em>'l'</em>) + Ext.fly(l.firstChild).getFrameWidth(<em>'r'</em>));
            <b>var</b> mc = <b>this</b>.bwrap.dom.firstChild.firstChild.firstChild;
            w += Ext.fly(mc).getFrameWidth(<em>'lr'</em>);
        }
        <b>return</b> w;
    },

    <i>/**
     * Returns the height <b>in</b> pixels of the framing elements of <b>this</b> panel (including any top and bottom bars and
     * header and footer elements, but not including the body height).  To retrieve the body height see {@link #getInnerHeight}.
     * @<b>return</b> {Number} The frame height
     */</i>
    getFrameHeight : <b>function</b>(){
        <b>var</b> h  = <b>this</b>.el.getFrameWidth(<em>'tb'</em>);
        h += (<b>this</b>.tbar ? <b>this</b>.tbar.getHeight() : 0) +
             (<b>this</b>.bbar ? <b>this</b>.bbar.getHeight() : 0);

        <b>if</b>(this.frame){
            <b>var</b> hd = <b>this</b>.el.dom.firstChild;
            <b>var</b> ft = <b>this</b>.bwrap.dom.lastChild;
            h += (hd.offsetHeight + ft.offsetHeight);
            <b>var</b> mc = <b>this</b>.bwrap.dom.firstChild.firstChild.firstChild;
            h += Ext.fly(mc).getFrameWidth(<em>'tb'</em>);
        }<b>else</b>{
            h += (<b>this</b>.header ? <b>this</b>.header.getHeight() : 0) +
                (<b>this</b>.footer ? <b>this</b>.footer.getHeight() : 0);
        }
        <b>return</b> h;
    },

    <i>/**
     * Returns the width <b>in</b> pixels of the body element (not including the width of any framing elements).
     * For the frame width see {@link #getFrameWidth}.
     * @<b>return</b> {Number} The body width
     */</i>
    getInnerWidth : <b>function</b>(){
        <b>return</b> this.getSize().width - <b>this</b>.getFrameWidth();
    },

    <i>/**
     * Returns the height <b>in</b> pixels of the body element (not including the height of any framing elements).
     * For the frame height see {@link #getFrameHeight}.
     * @<b>return</b> {Number} The body height
     */</i>
    getInnerHeight : <b>function</b>(){
        <b>return</b> this.getSize().height - <b>this</b>.getFrameHeight();
    },

    <i>// private</i>
    syncShadow : <b>function</b>(){
        <b>if</b>(this.floating){
            <b>this</b>.el.sync(true);
        }
    },

    <i>// private</i>
    getLayoutTarget : <b>function</b>(){
        <b>return</b> this.body;
    },

    <i>/**
     * &lt;p&gt;Sets the title text <b>for</b> the panel and optionally the icon class.&lt;/p&gt;
     * &lt;p&gt;In order to be able to set the title, a header element must have been created
     * <b>for</b> the Panel. This is triggered either by configuring the Panel <b>with</b> a non-blank title,
     * or configuring it <b>with</b> &lt;tt&gt;&lt;b&gt;{@link #header}: true&lt;/b&gt;&lt;/tt&gt;.&lt;/p&gt;
     * @param {String} title The title text to set
     * @param {String} iconCls (optional) iconCls A user-defined CSS class that provides the icon image <b>for</b> this panel
     */</i>
    setTitle : <b>function</b>(title, iconCls){
        <b>this</b>.title = title;
        <b>if</b>(this.header &amp;&amp; <b>this</b>.headerAsText){
            <b>this</b>.header.child(<em>'span'</em>).update(title);
        }
        <b>if</b>(iconCls){
            <b>this</b>.setIconClass(iconCls);
        }
        <b>this</b>.fireEvent(<em>'titlechange'</em>, <b>this</b>, title);
        <b>return</b> this;
    },

    <i>/**
     * Get the {@link Ext.Updater} <b>for</b> this panel. Enables you to perform Ajax updates of <b>this</b> panel's body.
     * @<b>return</b> {Ext.Updater} The Updater
     */</i>
    getUpdater : <b>function</b>(){
        <b>return</b> this.body.getUpdater();
    },

     <i>/**
     * Loads <b>this</b> content panel immediately <b>with</b> content returned from an XHR call.
     * @param {Object/String/Function} config A config object containing any of the following options:
&lt;pre&gt;&lt;code&gt;
panel.load({
    url: &quot;your-url.php&quot;,
    params: {param1: &quot;foo&quot;, param2: &quot;bar&quot;}, <i>// or a URL encoded string</i>
    callback: yourFunction,
    scope: yourObject, <i>// optional scope <b>for</b> the callback</i>
    discardUrl: false,
    nocache: false,
    text: &quot;Loading...&quot;,
    timeout: 30,
    scripts: false
});
&lt;/code&gt;&lt;/pre&gt;
     * The only required property is url. The optional properties nocache, text and scripts
     * are shorthand <b>for</b> disableCaching, indicatorText and loadScripts and are used to set their
     * associated property on <b>this</b> panel Updater instance.
     * @<b>return</b> {Ext.Panel} <b>this</b>
     */</i>
    load : <b>function</b>(){
        <b>var</b> um = <b>this</b>.body.getUpdater();
        um.update.apply(um, arguments);
        <b>return</b> this;
    },

    <i>// private</i>
    beforeDestroy : <b>function</b>(){
        <b>if</b>(this.header){
            <b>this</b>.header.removeAllListeners();
            <b>if</b>(this.headerAsText){
                Ext.Element.uncache(<b>this</b>.header.child(<em>'span'</em>));
            }
        }
        Ext.Element.uncache(
            <b>this</b>.header,
            <b>this</b>.tbar,
            <b>this</b>.bbar,
            <b>this</b>.footer,
            <b>this</b>.body,
            <b>this</b>.bwrap
        );
        <b>if</b>(this.tools){
            <b>for</b>(var k <b>in</b> this.tools){
                Ext.destroy(<b>this</b>.tools[k]);
            }
        }
        <b>if</b>(this.buttons){
            <b>for</b>(var b <b>in</b> this.buttons){
                Ext.destroy(<b>this</b>.buttons[b]);
            }
        }
        Ext.destroy(
            <b>this</b>.topToolbar,
            <b>this</b>.bottomToolbar
        );
        Ext.Panel.superclass.beforeDestroy.call(<b>this</b>);
    },

    <i>// private</i>
    createClasses : <b>function</b>(){
        <b>this</b>.headerCls = <b>this</b>.baseCls + <em>'-header'</em>;
        <b>this</b>.headerTextCls = <b>this</b>.baseCls + <em>'-header-text'</em>;
        <b>this</b>.bwrapCls = <b>this</b>.baseCls + <em>'-bwrap'</em>;
        <b>this</b>.tbarCls = <b>this</b>.baseCls + <em>'-tbar'</em>;
        <b>this</b>.bodyCls = <b>this</b>.baseCls + <em>'-body'</em>;
        <b>this</b>.bbarCls = <b>this</b>.baseCls + <em>'-bbar'</em>;
        <b>this</b>.footerCls = <b>this</b>.baseCls + <em>'-footer'</em>;
    },

    <i>// private</i>
    createGhost : <b>function</b>(cls, useShim, appendTo){
        <b>var</b> el = document.createElement(<em>'div'</em>);
        el.className = <em>'x-panel-ghost '</em> + (cls ? cls : <em>''</em>);
        <b>if</b>(this.header){
            el.appendChild(<b>this</b>.el.dom.firstChild.cloneNode(true));
        }
        Ext.fly(el.appendChild(document.createElement(<em>'ul'</em>))).setHeight(<b>this</b>.bwrap.getHeight());
        el.style.width = <b>this</b>.el.dom.offsetWidth + <em>'px'</em>;;
        <b>if</b>(!appendTo){
            <b>this</b>.container.dom.appendChild(el);
        }<b>else</b>{
            Ext.getDom(appendTo).appendChild(el);
        }
        <b>if</b>(useShim !== false &amp;&amp; <b>this</b>.el.useShim !== false){
            <b>var</b> layer = <b>new</b> Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el);
            layer.show();
            <b>return</b> layer;
        }<b>else</b>{
            <b>return</b> new Ext.Element(el);
        }
    },

    <i>// private</i>
    doAutoLoad : <b>function</b>(){
        <b>var</b> u = <b>this</b>.body.getUpdater();
        <b>if</b>(this.renderer){
            u.setRenderer(<b>this</b>.renderer);
        }
        u.update(<b>typeof</b> this.autoLoad == <em>'object'</em> ? <b>this</b>.autoLoad : {url: <b>this</b>.autoLoad});
    },
    
    <i>/**
     * Retrieve a tool by id.
     * @param {String} id
     * @<b>return</b> {Object} tool
     */</i>
    getTool: <b>function</b>(id) {
        <b>return</b> this.tools[id];
    }

<i>/**
 * @cfg {String} autoEl @hide
 */</i>
});
Ext.reg(<em>'panel'</em>, Ext.Panel);
</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>